<template>
  <div>

    <el-dialog title="编辑用户" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" ref="userForm" label-width="120px" style="width: 85%;">

        <el-form-item 
          label="帐号">
          <el-input type="text" clearable disabled v-model="form.account"></el-input>
        </el-form-item>

        <el-form-item 
          label="密码">
          <el-input type="password" clearable v-model="form.password" placeholder="留空表示不修改密码"></el-input>
        </el-form-item>

        <el-form-item 
          label="昵称" 
          prop="nickName"
          :rules="[
            {required: true, message: '请输入昵称', trigger: 'change' }
          ]">
          <el-input type="text" clearable v-model="form.nickName"></el-input>
        </el-form-item>

        <el-form-item 
          label="备注">
          <el-input type="text" clearable v-model="form.remark"></el-input>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeEdit(false)">取 消</el-button>
        <SubmitButton 
          type="primary" 
          size="" 
          :ref-form="()=>{return this.$refs['userForm'];}" 
          :post-option="{url: modifyUrl, data: encryptForm(), callback: modifyCB }">
          确定
        </SubmitButton>
      </div>

    </el-dialog>

  </div>
  
</template>


<script>


  import SubmitButton from '../common/SubmitButton'

  import UserInfoApi from '../../api/UserInfoApi'

  import Md5Kit from '../../kit/Md5Kit'
  import JsonKit from '../../kit/JsonKit'  



  export default {
  	components: {
  		SubmitButton
  	},
  	data(){
  	  return {
        form: {
          userId: '',
          account: '',
          password: '',
          nickName: '',
          remark: ''
        },

        modifyUrl: UserInfoApi.URL_MODIFY,
  	  }
  	},
    props: ['isShow', 'editParam'],
  	computed: {
      dialogVisible: {
        get: function(){
          return this.isShow;
        },
        set: function(newValue){
          this.closeEdit(false);
        }
      }
  	},
  	created(){
      
  	},
    watch: {
      dialogVisible: function(newVal, oldVal){
        if (newVal) {
          let param = this.editParam();
          let userId = param.userId;

          UserInfoApi.getAccountInfoOf(userId, json => {
            let user = json.user;

            this.form.userId = user.id;
            this.form.account = user.account;
            this.form.nickName = user.nickName;
            this.form.remark = user.remark;
          });
        }
      }
    },
  	methods: {
      modifyCB(json){
        this.closeEdit(true);
      },
      closeEdit(isSuccess){
        this.form.remark = '';
        this.$refs['userForm'].resetFields();
        this.$root.eventHub.$emit('closeEditDialog', isSuccess);
      },
      encryptForm(){
        let form = JsonKit.copyObj(this.form);
        if (form.password != '') {
          form.password = Md5Kit.encryptMd5(form.password);  
        }
        return form;
      }
  	}
  }
</script>

